<template>
   <div class="content">
      <el-form ref="formRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="100px"
         class="demo-ruleForm" status-icon>
         <el-form-item label="类目编号" prop="id" style="margin-top: 10px;">
               <el-input v-model="formData.id" />
            </el-form-item>
         <el-form-item label="类目名称" prop="name" style="margin-top: 10px;">
            <el-input v-model="formData.name" />
         </el-form-item>
         <el-form-item label="图片" prop="img">
            <!-- <el-input v-model="formData.img" /> -->
            <Tuku v-model="formData.img1"></Tuku>&nbsp;
            <Tuku v-model="formData.img2"></Tuku>&nbsp;
            <Tuku v-model="formData.img3"></Tuku>
         </el-form-item>
         <el-form-item label="排序" prop="seq">
            <!-- <el-input v-model="formData.img" /> -->
            <el-input-number v-model="formData.seq" :min="1" :max="10" />
         </el-form-item>
          <el-form-item label="价格" prop="price">
                     <!-- <el-input v-model="formData.img" /> -->
                   <el-input-number v-model="formData.price" :precision="2" :step="0.1"/>
            </el-form-item>

         <el-form-item label="父关联ID" prop="categoryId">
            <el-tree-select v-model="formData.categoryId" :data="cateGorydata" :render-after-expand="true"
               style="width: 240px" />
         </el-form-item>
            <el-form-item label="商品介绍" prop="brief">
                     <!-- <el-input v-model="formData.brief" /> -->
                    <Editors v-model="formData.brief"></Editors>
                  </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">
               修改
            </el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<script setup lang="ts">
import { CategoryApi,ProductApi } from '@/api';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
//路由跳转 不传递参数
import { useRouter ,useRoute} from 'vue-router';
import Tuku from '@/components/Tuku.vue';
import Editors from '@/components/Editors.vue';

const router = useRouter()
const route=useRoute()  //携带路由参数 在路由跳转的时候 把params参数携带过来
const formRef = ref()
const formData = reactive({
    id: 0,
   name: '',
   img: '',
   img1: '',
   img2: '',
   img3: '',
   seq: 0,
   price: 0,
   brief: '',
   categoryId: 0
})
const cateGorydata = ref([
   {
      value: 0,
      label: '一级目录'
   }
])

const rules = reactive({
   name: [
      { required: true, message: '类目的名称是必填项', trigger: 'blur' },
      // { min: 3, max: 10, message: '必须输入3-5个字符', trigger: 'blur' },
   ],
})

onMounted(() => {
   CallCategoryTreeApi()
   console.log(route.query.id);
   formData.id = Number(route.query.id)
   //数据回显
   CallProductApi()

})
const CallProductApi = () => { 
     //const imgArray: any = []
   //数据回显
   ProductApi.select.call({ id: formData.id }).then((res: any) => { 
      console.log(res[0]);
      formData.name = res[0].name

      const imgArray = res[0].img.split(",")
       formData.img1 = imgArray[0];
      if (imgArray[1] != undefined && imgArray[1] !="") { 
         formData.img2 = imgArray[1];
      }
     if (imgArray[2] != undefined && imgArray[2] != "") {
         formData.img3 = imgArray[2];
      }
      formData.seq = res[0].seq
      formData.price = res[0].price
      formData.brief=res[0].brief
      formData.categoryId=res[0].categoryId
     // console.log(formData.biref);
      
   })
}

const CallCategoryTreeApi = () => {
   CategoryApi.select.call().then((cateGorydata1: any) => {
      // console.log(cateGorydata1);
      cateGorydata1.forEach((item: any) => {
         item.value = item.id
         item.label = item.name
      });
      const cateGorydata2 = cateGorydata1.reduce((hezi: any, currentvalue: any) => {
         // console.log("z子类的id：", currentvalue);

         //拿到父类的节点
         currentvalue.children = cateGorydata1.filter((item: any) => {
            return item.parentId === currentvalue.id
         })
         if (currentvalue.parentId === 0) {
            hezi.push(currentvalue)
         }
         return hezi;
      }, [])
      //console.log(cateGorydata2);
      cateGorydata.value = cateGorydata2
   })
}

//构建的方法
const formCategory = () => {
    let imgArray = []
   if (formData.img1 != '') { imgArray.push(formData.img1) }
   if (formData.img2 != '') { imgArray.push(formData.img2) }
   if (formData.img3 != '') { imgArray.push(formData.img3) }
   formData.img = imgArray.join(',')
   ProductApi.update.call({
      id:formData.id,name: formData.name, img: formData.img, seq: formData.seq,price:formData.price,
      categoryId: formData.categoryId
   }).then((res) => {
      console.log(res);
      ElMessage.success("恭喜您！！修改成功")
      router.push({ name: 'product-list' })
   })


}

const submitForm = async (formEl: any) => {
   if (!formEl) return
   await formEl.validate((valid: any, fields: any) => {
      if (valid) {
         console.log('submit!')
         formCategory()
      } else {
         console.log('error submit!', fields)
      }
   })
}

const resetForm = (formEl: any) => {
   if (!formEl) return
   formEl.resetFields()
}

</script>
<style scoped>
.content {
   width: 86%;
   background-color: beige;
   border-radius: 6px;
   border: 1px solid silver;
   margin-top: 10px;
   margin-left: 50px;
}
</style>